<template>
  <div class="alarm-events-container">
    <!-- 标题栏 -->
    <div class="alarm-header">
      <h4 class="alarm-title">报警事件</h4>
      <div class="status-indicator" :class="{ 'status-normal': noActiveAlarms }">
        <span class="status-dot"></span>
      </div>
    </div>
    
    <!-- 表格头部 -->
    <div class="table-header">
      <div class="header-cell">序号</div>
      <div class="header-cell">日期时间</div>
      <div class="header-cell">变量名</div>
      <div class="header-cell">事件类型</div>
      <div class="header-cell">事件描述</div>
      <div class="header-cell">报警级别</div>
    </div>
    
    <!-- 报警事件列表 -->
    <div class="alarm-list" ref="alarmListContainer">
      <div
        v-for="alarm in alarmEvents"
        :key="alarm.id"
        class="alarm-item"
        :class="getAlarmLevelClass(alarm.level)"
      >
        <div class="cell sequence-cell">{{ alarm.sequence }}</div>
        <div class="cell time-cell">{{ alarm.timestamp }}</div>
        <div class="cell variable-cell">{{ alarm.variableName }}</div>
        <div class="cell type-cell">{{ alarm.eventType }}</div>
        <div class="cell desc-cell">{{ alarm.description }}</div>
        <div class="cell level-cell">
          <span class="level-badge" :class="`level-${alarm.level}`">
            {{ getLevelText(alarm.level) }}
          </span>
        </div>
      </div>
      
      <!-- 空状态提示 -->
      <div v-if="alarmEvents.length === 0" class="empty-state">
        暂无报警事件
      </div>
    </div>
    
    <!-- 底部按钮 -->
    <div class="alarm-footer">
      <button class="history-button" @click="handleHistoryClick">历史报警</button>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, nextTick, onMounted } from 'vue';
import { useAlarmStore } from '@/store/alarm';

// 获取报警store
const alarmStore = useAlarmStore();

// 计算属性
const alarmEvents = computed(() => alarmStore.alarmEvents);
const noActiveAlarms = computed(() => alarmStore.alarmEvents.length === 0);

// 列表容器引用
const alarmListContainer = ref(null);

// 获取报警级别对应的样式类
const getAlarmLevelClass = (level) => {
  return `level-${level}`;
};

// 获取级别文本
const getLevelText = (level) => {
  const levelMap = {
    info: '信息',
    warning: '警告',
    error: '错误',
    critical: '严重',
  };
  return levelMap[level] || level;
};

// 处理历史报警按钮点击
const handleHistoryClick = () => {
  console.log('查看历史报警');
  // 这里可以添加跳转到历史报警页面的逻辑
};

// 组件挂载后滚动到底部
onMounted(() => {
  nextTick(() => {
    if (alarmListContainer.value) {
      alarmListContainer.value.scrollTop = alarmListContainer.value.scrollHeight;
    }
  });
});
</script>

<style scoped>
.alarm-events-container {
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
}

/* 标题栏样式 */
.alarm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: #333;
  border-bottom: 1px solid #444;
}

.alarm-title {
  margin: 0;
  font-size: 16px;
  color: #fff;
  font-weight: normal;
}

.status-indicator {
  display: flex;
  align-items: center;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ff0000;
  box-shadow: 0 0 6px rgba(255, 0, 0, 0.8);
}

.status-indicator.status-normal .status-dot {
  background-color: #00ff00;
  box-shadow: 0 0 6px rgba(0, 255, 0, 0.8);
}

/* 表格头部样式 */
.table-header {
  display: flex;
  background-color: #2a2a2a;
  border-bottom: 2px solid #000;
  font-size: 12px;
  color: #fff;
  padding: 6px 0;
}

.header-cell {
  padding: 0 8px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-cell:nth-child(1) { width: 60px; }
.header-cell:nth-child(2) { width: 140px; }
.header-cell:nth-child(3) { width: 120px; }
.header-cell:nth-child(4) { width: 100px; }
.header-cell:nth-child(5) { flex: 1; }
.header-cell:nth-child(6) { width: 80px; }

/* 报警列表样式 */
.alarm-list {
  flex: 1;
  overflow-y: auto;
  background-color: #1a1a1a;
}

.alarm-item {
  display: flex;
  border-bottom: 1px solid #333;
  padding: 6px 0;
  font-size: 12px;
  color: #ddd;
  transition: background-color 0.2s;
}

.alarm-item:hover {
  background-color: #252525;
}

.cell {
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.sequence-cell { width: 60px; }
.time-cell { width: 140px; }
.variable-cell { width: 120px; }
.type-cell { width: 100px; }
.desc-cell { flex: 1; }
.level-cell { width: 80px; }

/* 级别样式 */
.level-badge {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
}

.level-info {
  background-color: #4a9eff;
  color: #fff;
}

.level-warning {
  background-color: #ffa500;
  color: #fff;
}

.level-error {
  background-color: #ff4444;
  color: #fff;
}

.level-critical {
  background-color: #990000;
  color: #fff;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #666;
  font-size: 14px;
}

/* 底部按钮 */
.alarm-footer {
  padding: 8px 12px;
  background-color: #333;
  border-top: 1px solid #444;
  display: flex;
  justify-content: flex-end;
}

.history-button {
  background-color: #4a4a4a;
  border: 1px solid #666;
  color: #fff;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.history-button:hover {
  background-color: #5a5a5a;
}

/* 滚动条样式 */
.alarm-list::-webkit-scrollbar {
  width: 8px;
}

.alarm-list::-webkit-scrollbar-track {
  background: #2a2a2a;
}

.alarm-list::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

.alarm-list::-webkit-scrollbar-thumb:hover {
  background: #666;
}
</style>